<template>
  <div class="app-container" style="background: rgb(244, 244, 245)">
    <div v-if="!propGoodsId">
      <el-row>
        <el-col :span="12">
          <el-input v-model="goodsId" placeholder="请输入商品编码" clearable style="width: 98%" @keyup.enter.native="getDetail" />
        </el-col>
        <el-col :span="12">
          <el-button plain type="primary" @click="getDetail">获取详情</el-button>
        </el-col>
      </el-row>
    </div>
    <div v-if="goodsInfo">
      <el-form>
        <el-row>
          <el-col :span="16">
            <el-form-item label="商品编码: " style="margin: 2px">{{goodsInfo.goodsId}}</el-form-item>
            <el-form-item label="商品型号: " style="margin: 2px">{{goodsInfo.goodsName == null ? "" : goodsInfo.goodsName}}</el-form-item>
            <el-form-item label="回收金额: " style="margin: 2px">
              <span style="font-weight: bold;font-size: 24px;color: red">
                {{goodsInfo.costPrice == null ? "" : goodsInfo.costPrice}} 元
              </span>
            </el-form-item>
            <el-form-item label="备注: " style="margin: 2px">{{goodsInfo.remark == null ? "" : goodsInfo.remark}}</el-form-item>
            <el-form-item label="验机报告: " style="margin: 2px">{{testTran(goodsInfo.testInfo)}}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="串号: " style="margin: 2px">{{goodsInfo.goodsSn == null ? "" : goodsInfo.goodsSn}}</el-form-item>
            <el-form-item label="规格: " style="margin: 2px">{{goodsInfo.printing == null ? "" : goodsInfo.printing}}</el-form-item>
            <el-form-item label="门店: " v-if="goodsInfo.storeCollect" style="margin: 2px">{{goodsInfo.storeCollect.companyInfo}}</el-form-item>
            <el-form-item label="报价师: " v-if="goodsInfo.storeCollect" style="margin: 2px">{{offerNameFormat(goodsInfo.storeCollect)}}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!--   其他详情   -->
    <div v-if="goodsInfo">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="修改日志" name="record">
          <div class="pane-box">
            <record-list :goods-id="goodsInfo.goodsId" />
          </div>
        </el-tab-pane>
        <el-tab-pane label="预售价日志" name="sale">
          <div class="pane-box">
            <sale-price-list :prop-goods-id="goodsInfo.goodsId" />
          </div>
        </el-tab-pane>
        <el-tab-pane label="打理日志" name="manage">
          <div class="pane-box">
            <arrange-index :prop-goods-id="goodsInfo.goodsId" />
          </div>
        </el-tab-pane>
        <el-tab-pane label="借机日志" name="lend">
          <div class="pane-box">
            <loan-index :prop-goods-id="goodsInfo.goodsId" />
          </div>
        </el-tab-pane>
        <el-tab-pane label="移库日志" name="stock-log">
          <div class="pane-box">
            <el-table :data="warehouseList" border>
              <el-table-column align="center" label="原仓库" prop="oldStock" />
              <el-table-column align="center" label="新仓库" prop="newStock" />
              <el-table-column align="center" label="移库人" prop="create_by" />
              <el-table-column align="center" label="移库时间" prop="createTime" />
              <el-table-column align="center" label="确定人" prop="update_by" />
              <el-table-column align="center" label="确定时间" prop="updateTime" />
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="调价日志" name="modify">
          <div class="pane-box">
            <modify-index :prop-goods-id="goodsInfo.goodsId" />
          </div>
        </el-tab-pane>
        <el-tab-pane label="门店回收" name="storeCollect">
          <div class="pane-box">
            <el-table border :data="collectList" >
              <el-table-column label="编号" align="center" prop="storeId" width="60" />
              <el-table-column label="公司" align="center" prop="companyInfo" />
              <el-table-column label="机型" align="center" prop="modelName" />
              <el-table-column label="IMEI" align="center" prop="modelSn" />
              <el-table-column label="报价金额" align="center" prop="price" width="80" />
              <el-table-column label="返利" align="center" width="130">
                <template v-slot="scope">
                  <div style="text-align: left;cursor: pointer">
                    <div class="fl-row">
                      一: {{scope.row.priceOne}}
                      元({{thanPrice(scope.row.priceOne, scope.row.price)}})
                    </div>
                    <div class="fl-row">
                      二: {{scope.row.priceTwo}}
                      元({{thanPrice(scope.row.priceTwo, scope.row.price)}})
                    </div>
                    <div class="fl-row" style="border-bottom: 1px solid #000000">
                      三: {{scope.row.priceThree}}
                      元({{thanPrice(scope.row.priceThree, scope.row.price)}})
                    </div>
                    <div>合计: {{Number(scope.row.priceOne) + Number(scope.row.priceTwo) + Number(scope.row.priceThree)}} 元</div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="快递费" align="center" width="100" prop="expPrice" />
              <el-table-column label="合计" align="center" width="60">
                <template slot-scope="scope">
                  <span style="color: red">{{rowTotal(scope.row)}}</span>
                </template>
              </el-table-column>
              <el-table-column label="报价师" align="center" prop="offerName" width="100" :formatter="offerNameFormat" />
              <el-table-column label="登记时间" align="center" prop="createTime" width="100">
                <template v-slot="scope">
                  <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
                </template>
              </el-table-column>
              <el-table-column label="备注" align="center" width="280" prop="remark" />
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>

  </div>
</template>

<script>

import {getGoods} from "@/api/recovery/goods"
import recordList from "@/views/recovery/goods/componets/record-list.vue";
import salePriceList from "@/views/recovery/goods/componets/sale-price-list.vue";
import arrangeIndex from "@/views/recovery/arrange/index.vue"
import loanIndex from "@/views/recovery/loan/index.vue"
import {queryGoodsLogList} from "@/api/recovery/warehouse";
import modifyIndex from "@/views/recovery/modify/index.vue";
import {getCollect} from "@/api/store/collect";
import {listUser} from "@/api/system/user";

export default {
  name: "GoodsDetail",
  components: {recordList, salePriceList, arrangeIndex, loanIndex, modifyIndex},
  props: {
    propGoodsId: {type:String}
  },
  watch: {
    propGoodsId(now, old) {
      if(now) {
        this.goodsId = now;
        this.getDetail();
      }
    }
  },
  data() {
    return {
      goodsInfo: undefined,
      goodsId: undefined,
      activeName: 'record',
      /*报价师列表*/
      offerNameOptions: [],
      warehouseList: [],
      collectList: [],
    }
  },
  mounted() {
    listUser({roleKey:'quote'}).then(res => {
      this.offerNameOptions = res.rows;
    })
    if(this.propGoodsId) {
      this.goodsId = this.propGoodsId;
      this.getDetail();
    }
  },
  methods: {
    /** 查询门店回收列表 */
    getCollectList(val) {
      if(!val)
        return
      getCollect(val).then(response => {
        this.collectList = [];
        this.collectList.push(response.data)
      });
    },
    //行合计
    rowTotal(row) {
      let num = 0;
      if(row.price > 0) {
        num += row.price;
      }
      if(row.priceOne > 0) {
        num += row.priceOne;
      }
      if(row.priceTwo > 0) {
        num += row.priceTwo;
      }
      if(row.priceThree > 0) {
        num += row.priceThree;
      }
      if(row.expPrice > 0) {
        num += Number(row.expPrice);
      }
      return num;
    },
    /*计算百分比*/
    thanPrice(m,d) {
      let res = 0;
      if(Number(m) === 0) {
        res = 0
      }
      if(Number(d) === 0) {
        res = 0
      }
      res = Number(m) / Number(d) * 100;
      return parseInt(res) + "%";
    },
    // 报价师字典翻译
    offerNameFormat(row) {
      let str = "";
      this.offerNameOptions.forEach(item => {
        if(item.userId === Number(row.offerName))
          str = item.nickName;
      })
      return str;
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    getDetail() {
      if(!this.goodsId){
        this.msgWarning("请输入商品编码！");
        return
      }

      getGoods(this.goodsId).then(res => {
        this.goodsInfo = res.data;
        this.getCollectList(this.goodsInfo.storeId);
      })

      queryGoodsLogList(this.goodsId).then(res => {
        this.warehouseList = res.data;
      })
    },
    testTran(val) {
      if(!val)
        return "";
      let arr = val.split(",");
      let res = "";
      arr.forEach(it => {
        res += "[ " + it + " ] - ";
      })
      return res.substring(0, res.length - 2);
    }
  }
}
</script>

<style lang="scss" scoped>
  .pane-box {
    padding: 20px;
    background: #FFFFFF;
  }
</style>
